<template>
  <div class="st-con" :style="{ background: tag_background() }">
    <img :src="img_url()" />
    <span style="margin-left: 8px" :style="{ color: text_style() }">
      {{ statusText }}
    </span>
  </div>
</template>
<script>
export default {
  name: 'index',
  props: {
    statusType: {
      required: true
    },
    statusText: {
      type: String,
      required: true,
      default: '正常'
    }
  },
  data() {
    return {
      okStatus: require('@/assets/widget/ok-status.png'),
      errorStatus: require('@/assets/widget/error-status.png'),
      warnStatus: require('@/assets/widget/warn-status.png')
    };
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    tag_background() {
      var colotString = '';
      switch (this.statusText) {
        case '已关联':
          colotString = '#F0F9EB';
          break;
        case '未关联':
          colotString = '#FFF7DC';
          break;
        default:
          colotString = this.statusType == 1 ? '#F0F9EB' : '#FEF0F0';
          break;
      }
      return colotString;
    },
    img_url() {
      var imgString = null;
      switch (this.statusText) {
        case '已关联':
          imgString = this.okStatus;
          break;
        case '未关联':
          imgString = this.warnStatus;
          break;
        default:
          imgString = this.statusType == 1 ? this.okStatus : this.errorStatus;
          break;
      }
      return imgString;
    },

    text_style() {
      var colorString = null;
      switch (this.statusText) {
        case '已关联':
          console.log(this.statusText);
          colorString = '#67C23A';
          break;
        case '未关联':
          colorString = '#EAA400';
          break;
        default:
          colorString = this.statusType == 1 ? '#67C23A' : '#F56C6C';
          break;
      }
      return colorString;
    }
  }
};
</script>
<style scoped lang="scss">
.st-con {
  width: 88px;
  // width: 74px;
  // min-width: 60px;
  // max-width: 100px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 12px;
  border-radius: 4px;
}
</style>
